<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../../node_modules/swiper/dist/css/swiper.min.css">
    <script src="../../node_modules/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <header class="header">
        <span></span>
        <ul class="hd-cont">
            <li>
                <a href="javascript:void(0);" class="active">训练</a>
            </li>
            <li>
                <a href="javascript:void(0);">跑步</a>
            </li>
            <li>
                <a href="javascript:void(0);">骑行</a>
            </li>
        </ul>
        <figure>
            <img src="../images/index/search.png" alt="">
        </figure>
    </header>

    <div class="xl-hd">
        <figure>
            <img src="../images/index/close.png">
        </figure>
        <div>
            <p>为你推荐了每日目标</p><a href="javascript:void(0);">点击查看</a>
        </div>
        <span></span>
    </div>




    <div class="swiper-container main">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide-xl">
                <div class="xl-main">
                    <p>本周运动时长(分钟)</p>
                    <img src="../images/index/fanhui.png">
                    <h2>10</h2>
                    <figure>
                        <img src="../images/index/today.png">
                    </figure>
                </div>
                <div id="keep_canvas" class="keep-cvs"></div>
                <div class="xl-pm">
                    <p>本周好友运动排名</p>
                    <div class="pm">
                        <div></div>
                    </div>
                    <figure>
                        <img src="../images/index/toux.png">
                    </figure>
                </div>
                <div class="my_xl">
                    <h2>我的训练</h2>
                    <figure>
                        <img src="../images/index/tj_xl.png">
                        <img src="../images/index/tj_btn.png">
                        <p>你还没有参加训练</p>
                        <p>马上选择适合自己的训练课程</p>
                    </figure>
                </div>
                

            </div>

            <div class="swiper-slide xl-pb">
                <div class="all"></div>
                <div class="pb-mag">
                    <p>总公里数</p>
                    <h2>0.00</h2>
                    <p>RUNNING</p>
                    <p>暂无等级</p>
                </div>
                <h2 class="start-run">"开始你的第一次跑步吧"</h2>
                <p class="start-btn">出发去跑步</p>
            </div>

            <div class="swiper-slide slide-qx">
                <div class="all"></div>
                <div class="pb-mag">
                    <p>总公里数</p>
                    <h2>0.00</h2>
                    <p>CYCLING</p>
                    <p>暂无等级</p>
                </div>
                <h2 class="start-run">"开始你的第一次骑行吧"</h2>
                <p class="start-btn">出发去骑行</p>
            </div>
        </div>
    </div>



    <footer class="footer">
        <a href="../html/index.html">
            <img src="../images/public/ft-xl.png">
            <p>训练</p>
        </a>
        <a href="../html/index_fx.html">
            <img src="../images/public/ft-fx.png">
            <p>发现</p>
        </a>
        <a href="../html/index_dt.html">
            <img src="../images/public/ft-dt.png" >
            <p>动态</p>
        </a>
        <a href="javascript:void(0)">
            <img src="../images/public/ft-wd.png">
            <p>我的</p>
        </a>
    </footer>
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../../node_modules/swiper/dist/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper(".swiper-container", {
            calculateHeight: true,
            direction: 'horizontal',
            pagination: '.swiper-pagination',
            paginationClickable: true,
            onTransitionEnd:function(swiper){
                $(".hd-cont>li").eq(swiper.activeIndex).trigger("click");
            }
        })
        
        $(".hd-cont>li").on("click",function(e){
            e.preventDefault();
            $(".active").removeClass("active");
            $(this).children().addClass("active");
            swiper.slideTo($(this).index());
        })



        var myChart = echarts.init(document.getElementById('keep_canvas'), );
        option = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} min'
                }
            },
            series: [{
                    // name:'最高气温',
                    type: 'line',
                    data: [11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                }

            ],
            grid: {
                x: 50,
                y: 50,
                x2: 50,
                y2: 50,
                borderWidth: 1
            }
        };
        myChart.setOption(option);
    </script>
</body>

</html>